<template>
  <div class="main">
    <div class="backIndexTop">
      <poem class="poem"></poem>
      <el-image style="animation: header-effect 2s;width: 100%;height: 600px;;" class="backIndexTopImage"
        :src="blogIndexContent.blogIndexPicture">
      </el-image>
      <waves></waves>
    </div>
    <div class="backIndexBottom">
      <el-row type="flex" class="row-bg" :gutter="20">
        <el-col :span="6">
          <el-card shadow="always" class="cardMessage">
            <div class="image-container">
              <img :src="blogIndexContent.blogMasterPicture" alt="Sample Image" class="circular-image" />
            </div>
            <h1 class="blogMasterName">{{ blogIndexContent.blogMasterName }}</h1>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-divider></el-divider>
          <el-card shadow="never" class="showKnown">
            <i class="el-icon-message-solid">公告：<p style="color:goldenrod;">{{ blogIndexContent.blogNotice }}</p></i>
          </el-card>
          <el-divider></el-divider>

          <div v-for="(item, index) in blogCategoriesList" :index="index" :key="index" :itemData="item">
            <div class="postMain">
              <el-image style="width: 2vw; height: auto" :src="item.logo"></el-image>
              <span class="titleName">{{ item.name }}</span>
              <span class="titleName" style="margin-left: 70%;">More👉</span>
            </div>
            <el-divider></el-divider>
          </div>

        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getBlogIndexContent } from '@/api/blog/blogIndexPageContent.js';
import waves from '@/components/waves.vue';
import poem from '@/components/poem.vue';
import { getBlogCategoriesList } from '@/api/blog/blogCategories.js'
export default {
  name: 'backIndex',
  data() {
    return {
      blogIndexContent: {},
      blogCategoriesList: {},
    };
  },
  components: {
    waves,
    poem
  },
  //生命周期：挂载完成
  mounted() {
    this.getBlogIndexContent();
    this.getBlogCategoriesList();
  },
  methods: {
    getBlogIndexContent() {
      getBlogIndexContent(1).then(response => {
        this.blogIndexContent = response.data
      })
    },
    getBlogCategoriesList() {
      getBlogCategoriesList().then(response => {
        this.blogCategoriesList = response.data
        console.log(this.blogCategoriesList)
      })
    }
  }
};
</script>
<style>
.main {
  display: flex;
  flex-direction: column;
  /* 这会使子元素垂直排列 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  width: 100%;
  height: 100%;
}

.backIndexTop {
  display: flex;
  position: relative;
  display: inline-block;
  flex-direction: column;
  /* 这会使子元素垂直排列 */
  align-items: center;
  /* 水平居中 */
  width: 100%;
  height: 600px;
  background-color: aquamarine;
}

;

.backIndexTopImage {
  display: flex;
  flex-direction: column;
  /* 这会使子元素垂直排列 */
  align-items: center;
  /* 水平居中 */
  width: 100%;
  height: 600px;
}

.poem {
  position: absolute;
  z-index: 1000;
  left: 50%;
  /* 使其左边缘位于父元素的50%处 */
  top: 50%;
  /* 使其顶部边缘位于父元素的50%处 */
  transform: translate(-50%, -50%);
}

.backIndexBottom {
  display: flex;
  width: 80%;
  z-index: 1000;
}

.row-bg {
  width: 100%;
}

.image-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
  /* 确保超出部分被隐藏 */
}

.circular-image {
  width: 100%;
  /* 根据需要调整图片大小 */
  height: auto;
  clip-path: circle(40% at center);
  /* 创建圆形裁剪，100px为半径 */
  transition: transform 0.5s ease;
  /* 添加过渡效果，以便平滑旋转 */
}

.circular-image:hover {
  transform: translateY(0px) rotate(360deg);
  /* 鼠标悬停时上移并旋转 */
}

.cardMessage {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  background-image: linear-gradient(to bottom, #fdbc40, #4a90e2);
  /* 从蓝色渐变到黄色 */
}

.cardMessage:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  /* 自定义阴影颜色和强度 */
  transition: box-shadow 0.3s ease;
  /* 添加过渡效果，使变化更平滑 */
}

.showKnown {
  border-style: solid;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.blogMasterName {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center
}

.postMain {
  display: flex;
  gap: 10px;
}

.titleName {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  opacity: 0.9;
  font-size: large;
  font-weight: bolder;
}
</style>